<template>
  <div>
    <c-title :hide="false" text="商户入驻"></c-title>
    <div>
      <div class="user-info">
        <div class="title">基本信息</div>
        <van-field required :border="false" label-class="user-label" v-model="form.store_name" label="商户名称" placeholder="请输入商户名称" input-align="right" />
        <div class="image-list">
          <div class="otherphoto section flex-a-c flex-j-sb">
            <div class="top">
              <div class="span"><span>*</span>{{ is_hotel ? hotelTitleType + "图片:" : "商户logo" }}</div>
            </div>
            <div class="imgflex" @click="selectIndex(1)">
              <van-uploader :after-read="onRead" multiple>
                <div class="photoshow">
                  <img :src="form.store_logo" v-if="form.store_logo" mode="widthFix" />
                  <div class="crucifix" v-else></div>
                </div>
              </van-uploader>
            </div>
          </div>
        </div>
        <van-cell title="商户分类" :value="CategoryName || '请选择'" required :border="false" title-class="user-label" value-class="user-value" is-link @click="onPupop" />
        <van-cell required title="所在地区" :value="addressName || '请选择'" :border="false" title-class="user-label" value-class="user-value" is-link @click="onAddress" />
        <van-cell v-if="strShow" title="所在街道：" required @click="streetShowbtn" :value="streetName || '请选择街道'" title-class="user-label" is-link :border="false" />
        <van-field required label-class="user-label" :border="false" v-model="form.address" label="详细地址" placeholder="请输入详细地址" input-align="right" @input="DetailInput" />
        <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="area"></yd-cityselect>
        <div class="location flex-a-c flex-j-sb">
          <div class="location-title"><span class="red">*</span>定位</div>
          <div class="location-right flex-a-c">
            <div class="location-text pl">{{ mapdataAddress }}</div>
            <div @click="toGeolocation">
              <span class="iconfont icon-dingwei"></span>
              <span class="toggle" @click="toGeolocation">{{ mapdataAddress ? "切换" : "自动定位" }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="user-other">
        <div class="title">其他信息</div>
        <van-cell required title="营业时间" :value="businessHours || '请选择'" :border="false" title-class="user-label" value-class="user-value" is-link @click="onPupop('hours')" />
        <van-field required label-class="user-label" v-model="form.store_mobile" :border="false" label="店铺电话" placeholder="请输入店铺电话" input-align="right" />
        <van-field required label-class="user-label" v-model="form.staff_name" :border="false" label="商户联系人" placeholder="请输入商户联系人" input-align="right" />

        <van-field required label-class="user-label" v-model="form.staff_mobile" :border="false" label="联系电话" placeholder="请输入联系电话" input-align="right" @input="staffInput" />

        <div class="commercial-banner">
          <div class="banner-title">商户banner</div>
          <div class="banner-outline flex-a-c flex-j-c" @click="selectIndex(2)">
            <van-uploader :after-read="onRead" multiple>
              <div class="photoshow">
                <img :src="form.store_banner" v-if="form.store_banner" />
                <div class="crucifix" v-else></div>
              </div>
            </van-uploader>
          </div>
        </div>

        <div class="introduction">
          <div class="int-title">商户简介</div>
          <div>
            <van-field input-class="introduction-area" v-model="form.store_desc" type="textarea" placeholder="请输入商户简介~" autosize :border="false" @input="descInput" />
          </div>
        </div>
      </div>

      <div class="attestation">
        <div class="title">
          认证信息
        </div>
        <van-field required label-class="user-label" v-model="form.business_name" label="企业名称" placeholder="请输入企业名称" :border="false" input-align="right" @input="businessInput" />
        <div class="attestation-banner mt_30 mb_48">
          <div class="banner-title"><span class="red">*</span>营业执照</div>
          <div class="banner-outline flex-a-c flex-j-c" @click="selectIndex(3)">
            <van-uploader :after-read="onRead" multiple>
              <div class="photoshow">
                <img :src="form.business_pics" v-if="form.business_pics" />
                <div class="crucifix" v-else></div>
              </div>
            </van-uploader>
          </div>
        </div>
        <div class="attestation-banner">
          <div class="banner-title"><span class="red">*</span>其他补充证件</div>
          <div class="flex-a-c attestation-another">
            <block v-for="(item, index) in form.another_pics" :key="index">
              <div class="another">
                <img :src="item" class="another-img" />
                <i @click="removeImg_1(index)"></i>
              </div>
            </block>
            <div class="banner-outline flex-a-c flex-j-c">
              <van-uploader :after-read="multipleMethod" multiple>
                <div class="photoshow">
                  <div class="crucifix"></div>
                </div>
              </van-uploader>
            </div>
          </div>
        </div>
        <div class="operation">
          <van-field required label-class="user-label" v-model="form.owner_name" label="运营者姓名" placeholder="请输入运营者姓名" :border="false" input-align="right" @input="ownerInput" />
        </div>

        <van-field required label-class="user-label" v-model="form.owner_mobile" label="运营者手机号" placeholder="请输入运营者手机号" :border="false" input-align="right" @input="mobileInput" />

        <div class="identity-item flex-j-sb">
          <div>
            <div class="identity-title"><span class="red">*</span>身份证人像面</div>
            <div class="identity-img" @click="selectIndex(4)">
              <van-uploader :after-read="onRead" multiple>
                <img
                  :src="form.identity_front_image ? form.identity_front_image : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/identity.png'"
                  class="identity"
                />
              </van-uploader>
            </div>
          </div>
          <div>
            <div class="identity-title"><span class="red">*</span>身份证国徽面</div>
            <div class="identity-img" @click="selectIndex(5)">
              <van-uploader :after-read="onRead" multiple>
                <img
                  :src="form.identity_back_image ? form.identity_back_image : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/identity2.png'"
                  class="identity"
                />
              </van-uploader>
            </div>
          </div>
        </div>
      </div>
      <div class="agreement flex-a-c" v-if="applyTextStatus">
        <van-checkbox v-model="checkedAll" icon-size="12px" checked-color="#FB5944" @change="checkChange"></van-checkbox>
        <div class="agreement-text">
          阅读并同意<span @click="applyPopup">《{{ applyDescName }}》</span>
        </div>
      </div>
      <div class="mb100"></div>
      <div class="verifier-footer flex-a-c flex-j-c">
        <div class="verifier-btn" @click="onRefund">提交</div>
      </div>

      <van-popup position="center" v-model="applyShow" @close="applyClose" round>
        <div class="qrcode-main">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/down.png" class="down" @click="applyClose" />
          <div class="title">{{ applyDescName }}</div>
          <div class="qrcode-list" id="qrcode-list" v-html="applyText"></div>
        </div>
      </van-popup>
      <van-popup v-model="classifyShow" @close="onClose" round position="bottom">
        <div class="distance-main">
          <div class="distance-head flex-a-c flex-j-sb">
            <div class="cancel" @click="onClose('distance')" data-type="distance">取消</div>
            <div class="title">选择商户分类</div>
            <div class="affirm" @click="onclassifyAffirm">确认</div>
          </div>
          <div class="distance-content flex">
            <div class="stair stair-bg">
              <block v-for="(item, index) in classifyList" :key="index">
                <div :class="classifyIndex === index ? 'on' : ''" @click="onStair(index, item)">
                  {{ item.name }}
                </div>
              </block>
            </div>
            <div class="stair " :class="secondIndex !== null ? 'stair-bg' : ''">
              <block v-for="(item, index) in secondLevel" :key="index">
                <div :class="secondIndex === index ? 'on' : ''" @click="onSecond(index, item)">
                  {{ item.name }}
                </div>
              </block>
            </div>
            <div class="stair" :class="threeIndex !== null ? 'stair-bg' : ''">
              <block v-for="(item, index) in threeLevel" :key="index">
                <div :class="threeIndex === index ? 'on' : ''" @click="onThreeLevel(index, item)">{{ item.name }}</div>
              </block>
            </div>
          </div>
        </div>
      </van-popup>

      <van-popup v-model="hoursShow" @close="onClose" round position="bottom">
        <div class="distance-main">
          <div class="distance-head flex-a-c flex-j-sb">
            <div class="cancel" @click="onClose('hours')">取消</div>
            <div class="title">营业时间</div>
            <div class="affirm" @click="onAffirm">确认</div>
          </div>
          <div class="week-content flex">
            <div class="week-list">
              <div class="week-title">营业日</div>
              <div class="flex-j-sb">
                <block v-for="(item, index) in workWeek" :key="index">
                  <div class="week-item" :class="item.checked ? 'weekOn' : ''" @click="workWeekOn(index)">{{ item.title }}</div>
                </block>
              </div>
            </div>
            <div class="week-time">
              <div class="time-title">营业时间</div>
              <div class="time-head flex-a-c ">
                <div class="start-w flex-j-c">
                  <div class="start-time flex-j-c flex-a-c" :class="timeState === 1 ? 'time-on' : ''" @click="chooseTimeOn(1)">{{ startTime }}</div>
                </div>
                <div class="until">至</div>
                <div class="start-w flex-j-c">
                  <div class="end-time flex-j-c flex-a-c" :class="timeState === 2 ? 'time-on' : ''" @click="chooseTimeOn(2)">{{ endTime }}</div>
                </div>
              </div>
              <div class="picker-time">
                <van-datetime-picker v-model="currentTime" type="time" title="选择时间" :min-hour="0" :max-hour="23" :show-toolbar="false" @change="bindChangeTime" />
              </div>
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup v-model="streetShow" :style="{ width: '100%', height: '100%', overflow: auto }" position="right" @close="onClose">
        <van-nav-bar title="选择街道" left-text="" right-text="" left-arrow @click-left="treetShowLeft" />
        <div class="content">
          <block v-for="(item, index) in districtVal" :key="index">
            <van-cell :title="item.areaname" @click="streetConfirm(item)" is-link title-style="text-align:left" />
          </block>
        </div>
      </van-popup>
      <van-toast id="van-toast" />
      <!-- <address-popup model:addShow="{{addressShow}}"  bind:resultAddress="getAddress"></address-popup> -->
    </div>
  </div>
</template>
<script>
import merchantsIn_controller from "./merchantsIn_controller.js";

export default merchantsIn_controller;
</script>
<style scoped>
.user-other ::v-deep .user-value {
  flex: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#qrcode-list ::v-deep img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
</style>
<style lang="scss" scoped>
.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb100 {
  height: 3.125rem;
  clear: both;
}

.mr10 {
  margin-right: 0.3125rem;
}

.mb_48 {
  margin-bottom: 1.5rem;
}

.mt_30 {
  margin-top: 0.9375rem;
}

.user-info {
  .user-label {
    font-size: 0.9375rem;
    color: #282828;
    text-align: left;
  }

  margin: 0.625rem 0.625rem 0 0.625rem;
  background: #fff;
  border-radius: 0.3125rem;

  .user-value,
  .user-other .user-value {
    flex: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .title {
    font-size: 1rem;
    color: #282828;
    padding: 0.9375rem 0 0 0.7813rem;
    text-align: left;
  }

  /* padding:  0 0.3906rem ; */
}

.red {
  color: red;
}

.image-list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0 0.3906rem;
  box-sizing: border-box;
  margin-bottom: 0.625rem;

  /* padding: 0.375rem 0;
	margin-top: -0.3125rem; */
  .otherphoto {
    .top {
      text-align: left;
      box-sizing: border-box;
      line-height: 3.125rem;

      .span {
        font-size: 0.9375rem;
        color: rgba(51, 51, 51, 1);
      }

      span {
        color: red;
      }
    }

    .imgflex,
    .imgflex2 {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 0.75rem;
      height: 3.7188rem;
      width: 7.5rem;

      .photoshow {
        border-radius: 0.125rem;
        width: 3.7188rem;
        height: 3.7188rem;
        border: 0.0313rem dashed rgb(192, 204, 218);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .crucifix {
        /* 十字架样式 */
        width: 1.2813rem;
        height: 0.125rem;
        background: #b2b2b2;
        border-radius: 0.0313rem;
        position: relative;

        &::after {
          content: "";
          width: 1.2813rem;
          height: 0.125rem;
          background: #b2b2b2;
          border-radius: 0.0313rem;
          position: absolute;
          transform: rotate(-90deg);
          left: 0;
        }
      }

      img {
        width: 3.75rem;
        height: 3.75rem;
      }
    }
  }
}

// .image-list .otherphoto .imgflex2 .photoshow {
//   border-radius: 0.125rem;
//   width: 3.4531rem;
//   height: 1.2656rem;
//   border: 0.0313rem dashed rgb(192, 204, 218);
//   overflow: hidden;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

.cimg {
  width: 1.0938rem;
  height: 1.0938rem;
}

.yimg {
  width: 100%;
  height: 100%;
}

.location {
  padding: 0.4688rem 0.3906rem;
}

.location-title {
  font-size: 0.4688rem;
  white-space: nowrap;
  margin-right: 0.0938rem;
}

.location-right {
  .icon-dingwei {
    margin-left: 0.2344rem;
    color: #fa2a0f;

    .toggle {
      color: #fa2a0f;
      font-size: 0.375rem;
    }
  }

  .location-text {
    width: 6.25rem;
  }
}

.user-other {
  .user-label {
    font-size: 0.9375rem;
    color: #282828;
    text-align: left;
  }

  margin: 0.625rem 0.625rem 0 0.625rem;
  background-color: #fff;
  padding-bottom: 0.9375rem;

  .title {
    color: #282828;
    font-size: 1rem;
    padding: 0.9375rem 0 1.3438rem 0.7813rem;
    text-align: left;
  }
}

.banner-outline {
  width: 5.625rem;
  height: 3.75rem;
  border: 0.0313rem dashed #a1a1a1;

  .photoshow {
    border-radius: 0.125rem;
    width: 5.625rem;
    height: 3.75rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .crucifix {
    /* 十字架样式 */
    width: 1.2813rem;
    height: 0.125rem;
    background: #b2b2b2;
    border-radius: 0.0313rem;
    position: relative;

    &::after {
      content: "";
      width: 1.2813rem;
      height: 0.125rem;
      background: #b2b2b2;
      border-radius: 0.0313rem;
      position: absolute;
      transform: rotate(-90deg);
      left: 0;
    }
  }

  img {
    width: 5.625rem;
    height: 3.75rem;
  }
}

.commercial-banner,
.attestation-banner {
  padding: 0 0 0 1.5625rem;

  .banner-title {
    color: #282828;
    font-size: 0.9375rem;
    margin-bottom: 0.6875rem;
    text-align: left;
  }

  .attestation-banner {
    padding: 0 0 0 1.5625rem;
  }
}

.introduction {
  padding: 1.5625rem 0 0 0.9375rem;

  .int-title {
    color: #282828;
    font-size: 1rem;
    margin-bottom: 0.6875rem;
    text-align: left;
  }
}

.introduction .van-field__body {
  width: 9.9531rem;
  height: 3.4375rem;
  border: 2.0032rpx solid #cfcfcf;
  border-radius: 0.1563rem;
  text-align: start;
  box-sizing: border-box;
  padding: 0.3906rem 0 0 0.4063rem;
  line-height: 0.5469rem;
  align-items: flex-start;
}

.introduction .van-cell--borderless {
  padding: 0;
}

.attestation {
  margin: 0.625rem;
  background-color: #fff;

  .attestation-banner {
    padding: 0 0 0 1.5625rem;
  }

  .operation {
    padding-top: 0.4688rem;
  }

  .title {
    padding: 0.9375rem 0 1.3438rem 0.7813rem;
    font-size: 1rem;
    color: #282828;
    text-align: left;
  }
}

.identity-item {
  padding: 0.625rem 0.375rem 0.4688rem 0.375rem;

  .identity-title {
    font-size: 1rem;
    color: #282828;
    margin-bottom: 0.6875rem;
  }

  .identity-img {
    width: 9.875rem;
    height: 6.0625rem;

    .identity {
      width: 9.875rem;
      height: 6.0625rem;
    }
  }
}

.identity-left {
  display: flex;
  flex-direction: column;
  border: 2.0032rpx solid #000;
}

.verifier-footer {
  height: 3.125rem;
  position: fixed;
  bottom: 0;
  padding: 0 0.9375rem 0 0.9375rem;
  background-color: #fff;
  z-index: 100;

  .verifier-btn {
    width: 21.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    font-size: 0.9375rem;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    border-radius: 0.3125rem;
  }
}

.agreement {
  margin: 1.2656rem 0 0.5rem 0.4688rem;

  .agreement-text {
    margin-left: 0.2188rem;
    font-size: 0.3125rem;
    color: #1e1e1e;

    span {
      color: #fb5944;
    }
  }
}

.distance-main {
  background-color: #fff;

  .title {
    font-size: 0.5rem;
    font-weight: 600;
    color: #3b3b4a;
  }

  .distance-content {
    flex-wrap: wrap;
    margin-top: 0.6719rem;
    background-color: #fafafa;

    .stair-bg {
      background-color: #fff;
    }

    .stair {
      div {
        width: 7.8125rem;
        height: 2.5rem;
        line-height: 2.5rem;
        padding-left: 0.9375rem;
        font-size: 0.875rem;
        color: #3b3b4a;
        box-sizing: border-box;
        text-align: left;
      }

      .on {
        background: rgba(255, 58, 0, 0.1);
        color: #ff3a00;
      }
    }
  }
}

.distance-head {
  padding: 1.3125rem 0.8438rem 0 0.8125rem;

  .cancel {
    font-size: 0.75rem;
    color: #aaaab3;
  }

  .affirm {
    font-size: 0.75rem;
    color: #3b3b4a;
  }
}

.week-content {
  padding: 0.9375rem 0.8125rem 0 0.8438rem;
  flex-direction: column;

  .week-list {
    color: #3b3b4a;
    font-size: 0.875rem;
    width: 100%;

    .weekOn {
      color: #fa2a0f;
    }
  }

  .week-title {
    margin-bottom: 1.25rem;
    text-align: left;
  }

  .week-item {
    font-size: 1rem;
    font-weight: bold;
    color: #333;

    .on {
      color: #fa2a0f;
    }
  }

  .week-time {
    margin: 1.875rem 0 0 0;

    .time-head {
      margin-bottom: 1.25rem;
      display: flex;
      position: relative;

      .start-w {
        flex: 0 0 50%;

        .start-time,
        .end-time {
          font-size: 1.125rem;
          color: rgba(21, 20, 20, 0.5);
        }

        .time-on {
          width: 4.375rem;
          height: 1.75rem;
          line-height: 1.75rem;
          background: linear-gradient(90deg, #ff693e 0%, #ff3c03 100%);
          border-radius: 0.1875rem;
          color: #fff;
        }
      }

      .until {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.4688rem;
        color: #151414;
      }
    }

    .time-title {
      text-align: left;
      font-size: 0.875rem;
      color: #3b3b4a;
      margin-bottom: 0.9375rem;
    }
  }
}

.attestation-another {
  flex-wrap: wrap;
}

.another {
  width: 5.625rem;
  height: 3.75rem;
  margin-right: 0.1563rem;
  position: relative;

  img {
    width: 5.625rem;
    height: 3.75rem;
  }

  i {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    background: url();
    background-size: 100%;
  }
}

/* 券码弹窗 */
.qrcode-main {
  width: 20.8125rem;
  padding: 1.0313rem 0.625rem 1.25rem 0.625rem;
  box-sizing: border-box;
  position: relative;
  border-radius: 0.3125rem;

  .title {
    font-size: 1.0625rem;
    color: #222;
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .down {
    width: 1.3125rem;
    height: 1.3125rem;
    position: absolute;
    top: 0.9375rem;
    right: 0.9375rem;
  }

  .qrcode-list {
    height: 21.5625rem;
    overflow-y: scroll;
  }

  .qrcode-item {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0.7188rem;
    height: 2.3438rem;
    background-color: #f4f4f4;
  }
}
</style>
